<template>
  <div class="row">
    <grid xs="7"
      ><button
        class="btn love {{ product.liked ? 'loved' : '' }}"
        @click="likeIt"
      >
        <i class="ion-ios-heart"></i
        ><span class="ml-small">{{ product.liked ? "Unlike" : "Like" }}</span>
      </button>
      <div class="psr dib">
        <button class="btn share ml-small" @click="toggleShare">
          <i class="ion-android-share-alt"></i
          ><span class="ml-small">Share</span>
        </button>
        <div
          class="share-list animated bounceIn"
          v-if="showShareList"
          v-click-outside:delay="toggleShare"
        >
          <a
            class="twitter"
            href="http://twitter.com/home?status=Check the Vue Mini Shop Out! It's either example App, built with Vue js https://bosnaufal.github.io/vue-mini-shop #vuejs #javascript #github"
            ><i class="ion-social-twitter"></i><span>Twitter</span></a
          ><a
            href="http://www.facebook.com/share.php?u=https://bosnaufal.github.io/vue-mini-shop"
            ><i class="ion-social-facebook"></i><span>Facebook</span></a
          >
        </div>
      </div></grid
    ><grid xs="5" classes="text-right"
      ><button class="psr btn buy" @click="addToCart">
        {{ addToCartClicked ? "Choose The Color" : "Add To Cart" }}
      </button></grid
    >
  </div>
</template>

<script>
import productStore from "../../store/modules/product.js";

export default {
  props: {
    product: {
      type: Object,
      default: {}
    },
    addToCartCallback: {
      type: Function,
      default: () => {}
    },
    colorSelected: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      showShareList: false,
      addToCartClicked: false
    };
  },

  watch: {
    colorSelected(val, old) {
      if (val === false) this.addToCartClicked = false;
    }
  },

  methods: {
    likeIt() {
      let me = this;
      this.$action("product:toggle_like", { product: me.product });
    },

    toggleShare() {
      this.showShareList = !this.showShareList;
    },

    addToCart() {
      this.addToCartCallback();
      this.addToCartClicked = !this.addToCartClicked;
    }
  }
};
</script>
